import React, { useState, useEffect, setState, useRef } from "react";
import axios from "axios";
import { message, Input, Button, Table, Tag, Modal, Form } from "antd";
import { useNavigate } from "react-router-dom";
import columns from "./roomTitle";
import Room from "./list/index";
import "./index.css";

const Entry = () => {
  const [deviceInfo, setDeviceInfo] = useState({});
  const [roomData, setRoomData] = useState([]);
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [addInfo, setAddInfo] = useState({});
  const navigate = useNavigate();
  const room = useRef();

  useEffect(() => {
    console.log();
    getDeviceInfo();
    getRoomInfo();
  }, []);

  useEffect(() => {
    if (addInfo.m_id) {
      setIsModalVisible(true);
    }
  }, [addInfo]);
  // 获取本机设备信息
  const getDeviceInfo = async () => {
    const res = await axios.get("http://127.0.0.1:4399/device/getDeviceInfo");
    console.log(res);
    if (!res.data.data) return;
    if (res.data.code == 200) {
      setDeviceInfo({
        ip: res.data.data.ip,
        mid: res.data.data.mid,
      });
    } else {
      message.info(res.data.code);
    }
  };

  const getRoomInfo = async () => {
    const res = await axios.get("http://127.0.0.1:4399/device/getRoomInfo");
    console.log(res);
    if (!res.data.data) return;
    if (res.data.code == 200) {
      setRoomData(res.data.data);
    } else {
      message.info(res.data.code);
    }
  };
  const handSubmit = async () => {
    console.log(deviceInfo);
  };

  const showModal = () => {
    setIsModalVisible(true);
  };

  // 新建房间
  const handleOk = () => {
    room.current.handClick();
  };

  const handleCancel = () => {
    setIsModalVisible(false);
    setAddInfo({});
  };

  const handJoinRoom = (record) => {
    console.log(record);
    setAddInfo({
      m_id: deviceInfo.mid,
      sync_id: record.sync_id,
      project_name: record.project_name,
    });
    // setIsModalVisible(true);
  };

  return (
    <>
      <div className="header">
        <div style={{ height: 60, display: "flex", alignItems: "center" }}>
          <img
            style={{ height: 60, width: 60 }}
            src="/assets/img/logo.png"
            alt=""
          />
          <span style={{ color: "white", fontWeight: 800 }}>
            唯有进化才能使人类更进一步!
          </span>
        </div>
        <div>
          本机IP:
          <span> {deviceInfo.ip}</span>
          本机m_id:
          <span> {deviceInfo.mid}</span>
        </div>
      </div>
      <div className="room_list">
        <span>本设备所在房间</span>
        <Table
          columns={[
            ...columns,
            {
              title: "操作",
              key: "operator",
              render: (text, record) => (
                <Button
                  type="link"
                  onClick={() => {
                    navigate("/room", { state: record.sync_id });
                  }}
                >
                  进入帮会
                </Button>
              ),
            },
          ]}
          dataSource={roomData.filter(
            (item) => item.master_device_id == deviceInfo.mid
          )}
          style={{ marginTop: 10 }}
        />
      </div>
      <div className="room_list">
        <span>在线帮伙列表</span>
        <Button type="primary" onClick={showModal}>
          创建房间
        </Button>
        <Table
          columns={[
            ...columns,
            {
              title: "操作",
              key: "operator",
              render: (text, record) => (
                <Button type="link" onClick={handJoinRoom.bind(this, record)}>
                  加入帮会
                </Button>
              ),
            },
          ]}
          dataSource={roomData}
          style={{ marginTop: 10 }}
        />
      </div>
      <Modal
        title={addInfo.m_id ? "项目信息" : "新增帮会"}
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
        cancelText="哥再想醒"
        okText={addInfo.m_id ? "光荣加帮" : "光荣创帮"}
      >
        <Room
          ref={room}
          m_id={deviceInfo.mid}
          setIsModalVisible={setIsModalVisible}
          getRoomInfo={getRoomInfo}
          addInfo={addInfo}
          setAddInfo={setAddInfo}
        ></Room>
      </Modal>
    </>
  );
};

export default Entry;
